<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'
const time: Ref<number> = ref(30 * 60 * 60 * 1000);

const show: Ref<boolean> = ref(false)
</script>

<template>
  <div class="pay">
    <van-nav-bar style="background-color: white;" title="确认订单">
      <template #left>
        <p @click="$router.back()"><van-icon color="gray" name="arrow-left" /><span class="back">返回</span> </p>
      </template>
    </van-nav-bar>

    <div class="topay">
      <p>支付剩余时间 <van-count-down :time="time" /></p>
      <h1>￥642.00</h1>
      <span @click="show = true">豪华休闲房【限上午9点后入住，晚上18点前退房】<van-icon name="arrow" /></span>
      <!-- 遮罩层 -->
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="msg">
            <h2>订单详情</h2>
            <h3>预定信息</h3>
            <van-divider />
            <p>君假酒店（千山城规站店）</p>
            <p>豪华休闲房【限上午9点后入住，晚上18点前退房】</p>
            <p>大床 不含早</p>
            <p>3月5日入住，3月6日离店，1晚x1间</p>
            <van-divider />
            <h3>入住人信息</h3>
            <p>入住人：张三三</p>
            <p>联系手机：18585858585</p>
            <van-divider />
            <h3>金额详情</h3>
            <p>
              <span>2020-03-05</span>
              <span class="hSpan">1 x ￥ 80.0</span>
            </p>
            <p>
              <span>优惠</span>
              <span class="hSpan">- ￥ 17.0</span>
            </p>
            <p>
              <span>总价</span>
              <span class="hSpan">1￥ 63.0</span>
            </p>
          </div>
        </div>
      </van-overlay>
    </div>

    <van-cell-group inset>
      <van-field model-value="微信支付" readonly>
        <template #left-icon>
          <van-icon class="icon1" name="wechat-pay" size="30px" />
        </template>
        <template #right-icon>
          <van-radio />
        </template>
      </van-field>

      <van-field model-value="支付宝支付" readonly>
        <template #left-icon>
          <van-icon class="icon2" name="alipay" size="30px" />
        </template>
        <template #right-icon>
          <van-radio name="1" />
        </template>
      </van-field>
      <van-field model-value="银行卡支付" readonly>
        <template #left-icon>
          <van-icon class="icon3" name="card" size="30px" />
        </template>
        <template #right-icon>
          <van-radio name="1" />
        </template>
      </van-field>
      <van-field model-value="银行卡支付" readonly>
        <template #left-icon>
          <van-icon class="icon4" name="gold-coin" size="30px" />
        </template>
        <template #right-icon>
          <van-radio name="1" />
        </template>
      </van-field>
    </van-cell-group>

    <van-button type="primary" size="large" @click="$router.push('/detail/paysuccess')">确认支付</van-button>

  </div>
</template>
<style lang="scss" scoped>
.topay {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: gray;

  h1 {
    color: red;
  }
}

.msg {
  width: 80%;
  /* height: 200px; */
  background-color: white;
  margin: auto;
  border: 1px solid blue;
  color: gray;
  padding: 10px;
  position: fixed;
  top: 100px;
  left: 30px;

  h2 {
    color: blue;
    text-align: center;
  }

  .hSpan {
    float: right;
  }

}

.van-cell-group {
  margin-top: 30px;
  margin-bottom: 150px;
}

.van-field {
  border-bottom: 1px solid gray;
  height: 50px;

  .icon1 {
    color: yellowgreen;
  }

  .icon2 {
    color: blue;
  }

  .icon3 {
    color: orange;
  }

  .icon4 {
    color: green;
  }

}
</style>